<template>
	<div>
		<flexbox v-for="(item,index) in list"  :key="index">
      		<flexbox-item :span="2/3">
      			<span v-html="item.text" style="white-space: pre-line;"></span>
      		</flexbox-item>
      		<flexbox-item>
      			{{item.orgName}} {{item.userName}} {{item.time}}
      			<a href="javascript:;" class="fa fa-edit weui-btn weui-btn_mini weui-btn_primary" v-if="!item.disabled&&(abPermission=='w'||abPermission=='b')" @click="edit(item)"></a>
      			<a href="javascript:;" class="fa fa-close weui-btn weui-btn_mini weui-btn_warn" v-if="!item.disabled&&(abPermission=='w'||abPermission=='b')" @click="remove(index)"></a>
      		</flexbox-item>
    	</flexbox>

		<div v-if="abPermission=='w'||abPermission=='b'">
			<x-textarea v-model="editText" placeholder="请输入意见" v-show="showEdit"></x-textarea>
			<a href="javascript:;" :style="style" class="fa fa-plus weui-btn weui-btn_mini weui-btn_primary" @click="showEdit = true" v-show="!showEdit" ></a>
			<a href="javascript:;" class="fa fa-check weui-btn weui-btn_mini weui-btn_primary" @click="addText" v-show="showEdit"></a>
			<a href="javascript:;" class="fa fa-close weui-btn weui-btn_mini weui-btn_warn" @click="close" v-show="showEdit"></a>
	   		<divider v-show="showEdit">常用语</divider>
	   		<ab-useful-opinion v-show="showEdit" @setOpinion="setOpinion"></ab-useful-opinion>
	   	</div>
   	</div>
</template>

<script>
import Vue from 'vue'
import { XTextarea } from 'vux'

export default {
	components : {
		XTextarea
	},
	props: {
		value : {},
		abPermission : {
			default : "w"
		},
		flowRequestParam : {}
	},
  	data() {
		return {
	    	editText : "",
	    	showEdit : false,
	    	list : [],
	    	style : "",
	    	editItem : null,
	    }
	},
 	mounted(){
		if(this.value){
			this.list = JSON.parse(this.value);
			this.list.forEach(item => {
				item.disabled = true;
			});
		}
		this.handlePermission();
 	},
	methods: {
		addText(){
			if(!this.editText){
				Vue.tools.toast("意见不能为空","warn");
				return;
			}
			var userMsgJson = window.localStorage.getItem("userMsg");
			if(!userMsgJson){
				Vue.tools.toast("登陆超时，请刷新页面","warn");
				return;
			}
			var userMsg = JSON.parse(userMsgJson);
			var user = userMsg.user;
			var org;
			if(userMsg.currentOrg){
				org = userMsg.currentOrg;
			}
			let json = {
				text : this.editText,
				userId : user.id,
				userName : user.fullname,
				orgCode : org ? org.code : "",
				orgName : org ? org.name : "",
				time : new Date().format("yyyy-MM-dd HH:mm"),
				nodeId : "",
				taskId : "",
			};

			if(this.flowRequestParam){
				this.$set(this.flowRequestParam,"opinion",this.editText);//自动设置入意见
				json.nodeId = this.flowRequestParam.nodeId || "";
				json.taskId = this.flowRequestParam.taskId || "";
			}
			
			if(this.editItem){
				this.editItem.text = this.editText;
				this.editItem = null;
			}else{
				this.list.push(json);
			}
			
			this.editText = "";
			this.showEdit = false;
		},
		close(){
			this.editText = "";
			this.showEdit = false;
		},
		remove(index){
			this.list.splice(index,1);
		},
		edit(item){
			this.showEdit = true;
			this.editText = item.text;
			this.editItem = item;
		},
		handlePermission(){
			if(this.abPermission == "b"){
				this.$vnode.context.$validity = this.$vnode.context.$validity || {};
				if(this.list.length==0){
					this.$vnode.context.$validity[this.$attrs.desc] = "必填";
					this.style = "border: 1px solid #ed4014 !important;";
				}else{
					delete this.$vnode.context.$validity[this.$attrs.desc];
					this.style = "";
				}
			}
		},
		setOpinion(op){
			this.editText = op;
		}
  	},
 	watch : {
 		list(newVal,oldVal){
 			this.$emit('input', JSON.stringify(newVal));
 			this.handlePermission();
 		},
 		abPermission(newVal,oldVal){
 			this.handlePermission();
 		}
 	}
}
</script>
